<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8">
  <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>milkbox-开发版,牛奶盒,milkbox,牛奶盒网站,奶盒网站</title>

  <!--本地版-->
  <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
  <script src="plugins/vue_2.6.14/vue.js"></script>
  <script src="plugins/elementUI_2.15.7/index.js"></script>
  <script src="plugins/axios/axios_0_27_2.min.js"></script>
  <script src="plugins/jquery/jquery-3.3.1.min.js"></script>

  <!-- 公共样式 -->
  <link rel="stylesheet" href="css/common/common.css">

  <!-- 引入头部 -->
  <script src="js/common/header.js"></script>
  <link rel="stylesheet" href="css/common/header.css">
  <!-- 引入尾部 -->
  <script src="js/common/footer.js"></script>
  <link rel="stylesheet" href="css/common/footer.css">

  <!-- 接口地址全局变量 -->
  <script src="/js/common/jieKouAddress.js"></script>
  <!-- 全局函数 -->
  <script src="/js/common/commonMethod.js"></script>

  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/common/test.css" />

  <!--广告-->
  <!--	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
  <!--	<script src="http://wm.lrswl.com/page/s.php?s=320010&w=950&h=150"></script>-->
  <!--	<script src="http://wm.lrswl.com/page/?s=320013"></script>-->

  <!--百度联盟验证-->
  <!--	<meta name="baidu_union_verify" content="8a3ec05ad84966ff6658cfdb1478b24f">-->
</head>

<body>

  <div id="app">
    <!-- 公共头部 -->
    <header id="headerContent"></header>
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="23" :md="20">
        <!--内容-->
        <el-row :gutter="20">
          <!--左侧-->
          <el-col class="left" :xs="24" :sm="14" :md="16" :lg="16" :xl="18">
            <!-- 提示信息 -->
            <el-alert style="margin-top: 20px;" title="友情提示" type="warning" description="您还没有登录，点击右上角登录，登录后解锁更多功能！"
              show-icon v-if="!vueHeader.isLogin">
            </el-alert>
            <!--产品列表-->
            <div class="product-list">
              <el-row :gutter="20">
                <!--左侧产品-->
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <!--每一项产品-->
                  <el-card class="pointer" shadow="hover" v-for="(product, index) in productList" :key="product.id"
                    v-if="index % 2 == 0">
                    <div @click="productClick(index)">
                      <el-row :gutter="20" type="flex" justify="center">
                        <el-col :span="8">
                          <img :src="product.logo" class="logo" />
                        </el-col>
                        <el-col :span="14" type="flex" justify="center">
                          <div class="name">{{product.name}}</div>
                          <div class="description">{{product.description}}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>
                <!--右侧产品-->
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <!--每一项产品-->
                  <el-card class="pointer" shadow="hover" v-for="(product, index) in productList" :key="product.id"
                    v-if="index % 2 != 0">
                    <div @click="productClick(index)">
                      <el-row :gutter="20" type="flex" justify="center">
                        <el-col :span="8">
                          <img :src="product.logo" class="logo" />
                        </el-col>
                        <el-col :span="14" type="flex" justify="center">
                          <div class="name">{{product.name}}</div>
                          <div class="description">{{product.description}}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                  <!--<div class="test-border-red">2</div>-->
                </el-col>
              </el-row>
            </div>
          </el-col>
          <!--右侧-->
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <!--工具区域-->
            <div class="tools-list">
              <!--公告区域-->
              <el-card shadow="hover">
                <div class="main-title">公告</div>
                <!--公告列表-->
                <div class="notice-list">
                  <div class="notice pointer" v-for="(notice, index) in noticeList" :key="notice.id" v-if="index < 3"
                    @click="toNotice">
                    <div class="top">
                      <!-- <div class="title">{{notice.title.length > 7 ? notice.title.substring(0,7) + "..." :
                        notice.title}}</div> -->
                      <div class="title milkbox-text-overflow-hidden">{{notice.title}}</div>
                      <div class="time">{{notice.time.split(" ")[0]}}</div>
                    </div>
                    <div class="content">{{notice.content.length > 30 ? notice.content.substring(0,30) + "..." :
                      notice.content}}</div>
                  </div>
                </div>
              </el-card>
              <el-card shadow="hover">
                日历
              </el-card>
              <el-card shadow="hover">
                其他
              </el-card>
              <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 公共尾部 -->
    <footer id="footerContent"></footer>
  </div>
  <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
  <script src="js/index.js"></script>

</body>

</html>